<template>
<div>
  <Header/>
  <!--主体-->
<div class="container">
      <div class="content">
        <div class="main">
          <div class="info-content clearfix">
            <div class="left">
              <h1>个人中心</h1>
              <a @click="gotoorder" class="order" :class="{active:'/center/order' === $route.path}">我的订单</a>
              <a @click="gotoprofile" class="profile" :class="{active:'/center/profile' === $route.path}">基本信息</a>
            </div>
            <router-view></router-view>
          </div>
        </div>
    </div>
</div>

<low/>
</div>

</template>

<script>
import low from "../components/low";
import Header from "../components/Header";
export default {
  name: "center",
  components:{
      low,Header
  },
  methods:{
      gotoorder(){
          this.$router.push('/center/order')
      },
      gotoprofile(){
          this.$router.push('/center/profile')
      }
  }
};
</script>
<style scoped>
      /* 主体 */
      .container {
        width: 1165px;
        margin: 0 auto;
      }
      .content {
        overflow: hidden;
        margin-top: 30px;
        border: 1px solid #ccc;
      }

      .info-content {
        position: relative;
      }
      .clearfix:after,
      .clearfix:before {
        content: " ";
        display: table;
      }
      .left {
        top: 0;
        left: 0;
        width: 200px;
        background-color: #f4f3f4;
        text-align: center;
        border-right: 1px solid #e1e1e1;
        position: absolute;
        height:900px;
      }
      .left h1 {
        margin-bottom: 30px;
        font-size: 22px;
        color: #222;
        font-weight: 400;
        padding-top: 40px;
      }
      a {
        display: block;
        font-weight: 400;
        color: #333;
        height: 40px;
        width: 202px;
        margin-left: -1px;
        line-height: 40px;
        font-size: 18px;
      }
      a.active {
        background-color: #ef4238;
        color: #fff;
      }
</style>
